<template>
  <div id="main-page">
    <div class="top">
      <!-- 机构查看页面 -->
      <div class="top-panel">
        <div class="top-item">
          <el-input placeholder="输入机构名" v-model="data.institute_name"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="seaerchInstituteList(data)">查找机构</el-button>
        </div>
        <div class="top-item">
          <el-input placeholder="输入机构地址" v-model="data.address"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="seaerchInstituteList(data)">查找地址</el-button>
        </div>
        <div class="top-item">
          <el-dropdown trigger="click" style="cursor: pointer" @command="handleTypeSelect">
            <span class="el-dropdown-link">
              机构类型<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="item.text" v-for="(item, index) in types" :key="index">{{ item.text
              }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="institute_name" label="机构名">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="institute_type" label="机构类型" width="100" :filters="types" :filter-method="filterTag"
          filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag type="success" disable-transitions>{{
              scope.row.institute_type
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="gotoDeptList(tableData[scope.$index].id)" type="text" size="small">查看科室</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :page-size="10" layout="prev, pager, next" :total="total" @current-change="changePage">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { organization } from "@/api";

import { userList } from "@/utils/data/organization";

export default {
  name: "Organization",
  components: {},
  data() {
    return {
      keyWord1: null,
      keyWord2: null,
      tableData: null,
      types: null,
      searchType: false,
      total: null,
      data: {
        cur: 1,
        institute_name: null,
        institute_type: null,
        address: null,
      },
    };
  },
  created() {
    this.seaerchInstituteList(this.data);
  },

  methods: {
    //分页点击事件
    changePage(val) {
      this.data.cur = val;
      this.seaerchInstituteList(this.data);
    },
    seaerchInstituteList(data) {
      organization.getDataList(data).then((res) => {
        console.log("=======", res);
        console.log(this.data);
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;

        console.log(res);
      });
    },
    filterTag(value, row) {
      console.log(value, row);
      return row.institute_type === value;
      // if (value === '民办') {

      //   console.log(value);
      //   return;
      // }
      // console.log(this.searchType);
      // if (!this.searchType) {
      //   const res = await organization.getDataList({
      //     cur: this.cur,
      //     institute_type: value,
      //   })
      //   console.log(res);
      //   this.searchType = true;
      //   console.log(this.searchType);
      // }
    },
    gotoDeptList(index) {
      console.log("goto OPT");
      console.log(index)
      this.$router.push({
        path: "/home/deptPatient",
        query: { id: index }
      });
    },
    initData() { },

    resetData() {
      this.data = {
        cur: 1,
        institute_name: null,
        institute_type: null,
        address: null,
      };
      // this.getDataList();
    },

    getDataList() {
      organization.getDataList(this.data).then((res) => {
        this.tableData = res.data.data.records;
      });
    },

    searchOrganizationByKeyWord() {
      this.data.institute_name = this.keyWord1;
      this.getDataList();
    },

    searchAddressByKeyWord() {
      this.data.address = this.keyWord2;
      this.getDataList();
    },

    // 类型选择
    // handleTypeSelect(command) {
    //   console.log(command);
    //   this.data.institute_type = command;
    //   this.getDataList();
    // },

    // handleCheckDepartment(item) {
    //   // console.log(item);
    //   this.$router.push({
    //     name: "department",
    //     params: {
    //       id: item.id,
    //     },
    //   });
    // },
  },
};
</script>

<style lang="less"></style>